import React from 'react'

import Button from '@/components/button/Button'
import doctorCardImg from '@/assets/image/doctorcard.png'

import {UserInfoWrapper} from './styledApplyUi'

export default function UserInfo({data}) {
    return (
        <UserInfoWrapper>
            <div className='userinfo'>
                <div className='top'>
                    <img src={doctorCardImg} alt="" />
                    <div className='user'>
                        <div className='name'>
                            {data.name}
                        </div>
                        <div className='info'>
                            <span className='left'>{data.sex}</span>
                            <span>{data.age}岁</span>
                        </div>
                    </div>
                </div>
                <div className='cardbottom'>
                    <div>
                        <span className='left'>身份证号</span>
                        <span>{data.number}</span>
                    </div>
                    <div>
                        <span className='left'>联系电话</span>
                        <span>{data.telephone}</span>
                    </div>
                    <div>
                        <span className='left'>家庭住址</span>
                        <span>{data.adress}</span>
                    </div>
                    
                </div>
            </div>
                <div className='button'>
                    <Button
                    size = 'mini'
                    text = '切换签约人'
                    bgColor = '#fff'
                    color ='#2984F8'
                    ></Button>
                </div>
        </UserInfoWrapper>
    )
}
